{% extends 'views/base.html' %}
{% block body %}
{% include "views/components/header.html" %}
<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">
      年年有风 风吹年年
    </p>
    <p class="subtitle">
      慢慢即漫漫
    </p>
  </div>
</section>
<div class="tile is-ancestor m-6">
  <div class="tile is-parent m-3">
    <div class="tile is-child box">
      <p class="title">我的文章</p>
      <div class="container margin-top">
        <div class="columns">
          <div class="column is-8 is-offset-2">
            {% for post in posts %}
            <div class="card has-background-primary-light mb-3">
              <div class="card-content">
                <div class="content ">
                  <a class="has-text-success" href="/posts/{{post._id}}">{{post.title}}</a>
                </div>
              </div>
            </div>
            {% endfor %}
            {% include "views/components/pagination.html" %}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tile is-3 is-vertical is-ancestor ">
    <div class="tile is-child box has-text-centered center ">
      <div class="box">
        <figure class="is-justify-content-center is-flex">
          <div class="image is-128x128 ">
            <img class="is-rounded" src="https://img2.baidu.com/it/u=1678948314,1083480950&fm=26&fmt=auto&gp=0.jpg">
          </div>
        </figure>
        <p class="mt-4 is-size-5">老鱼吃虾米</p>
      </div>
      <div class="is-justify-content-center is-align-items-center">
        <p class="content">东华理工大学 | 大四在读</p>
        <p class="content is-size-5">文章分类</p>
        <a class=" button is-fullwidth is-warning mb-3 has-text-white" href="/posts?c=JavaScript">JavaScript</a>
        <a class=" button is-fullwidth is-link  mb-3 has-text-white" href="/posts?c=CSS">CSS</a>
        <a class="has-text-white button is-fullwidth is-danger  mb-3" href="/posts?c=浏览器">浏览器</a>
        <a class="has-text-white button is-fullwidth button is-primary mb-3" href="/posts?c=算法">算法</a>
        <a class="has-text-white button is-fullwidth button is-info mb-3" href="/posts?c=Vue">Vue</a>
        <a class="has-text-white button is-fullwidth button is-primary mb-3" href="/posts">全部</a>
      </div>
    </div>
  </div>
</div>

{% endblock %}
